<!--
 * @Author: tianhao
 * @Date: 2023-01-02 15:22:14
 * @LastEditTime: 2023-02-21 19:42:04
 * @LastEditors: tianhao
 * @Description: 
 * @FilePath: \dcollege\src\views\paper\paper.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="top">
    <var-icon name="chevron-left" :size="30" class="ret" @click="fanHui()" />
    <div class="jindu">论文进度</div>
  </div>

  <div class="title">论文选题</div>
  <a href="/list">
    <div class="xuanti">
      <div class="icon">已开放</div>
      <div class="title2">论文选题</div>
      <div class="time">2022.12.30-2023.3.1</div>
      <var-image src="./image/xuanti.png" class="img"/></div
  ></a>
  <a href="#">
    <div class="baogao">
      <div class="icon">未开放</div>
      <div class="title2">开题报告</div>
      <div class="time">2023.5.1-2023.6.1</div>
      <var-image src="./image/baogao.png" class="img"/></div
  ></a>
  <a href="/presubmit">
    <div class="tijiao">
      <div class="icon">已开放</div>
      <div class="title2">论文提交</div>
      <div class="time">2022.12.30-2023.3.1</div>
      <var-image src="./image/tijiao.png" class="img"/></div
  ></a>
  <a href="#">
    <div class="dabian">
      <div class="icon">未开放</div>
      <div class="title2">论文答辩</div>
      <div class="time">2022.12.30-2023.1.30</div>
      <var-image src="./image/dabian.png" class="img"/></div
  ></a>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
function fanHui() {
  router.go(-1);
}
</script>

<style lang="less" scoped>
.ret {
  float: left;
  margin-top: 30px;
}
.title {
  position: absolute;
  font-size: 25px;
  margin-top: 90px;
  margin-left: 30px;
  font-weight: bolder;
}
.jindu {
  float: right;
  margin-top: 32px;
  margin-right: 15px;
}
.xuanti {
  position: absolute;
  width: 150px;
  height: 200px;
  background-color: rgb(220, 225, 240);
  margin: 170px auto auto 30px;
  border-radius: 10px;
  color: black;
  .img {
    margin: 0px auto auto 10px;
  }
}
.baogao {
  position: absolute;
  width: 150px;
  height: 200px;
  background-color: rgb(220, 225, 240);
  margin: 170px auto auto 210px;
  border-radius: 10px;
  color: black;
  .img {
    margin: 10px auto auto 10px;
  }
}
.tijiao {
  position: absolute;
  width: 150px;
  height: 200px;
  background-color: rgb(220, 225, 240);
  margin: 410px auto auto 30px;
  border-radius: 10px;
  color: black;
  .img {
    margin-top: 9px;
    margin-left: 1px;
  }
}
.dabian {
  position: absolute;
  width: 150px;
  height: 200px;
  background-color: rgb(220, 225, 240);
  margin: 410px auto auto 210px;
  border-radius: 10px;
  color: black;
  .img {
    width: 150px;
    margin: 20px auto auto 0px;
  }
}
.xuanti:hover {
  background-color: rgb(66, 106, 237);
  color: white;
}
.baogao:hover {
  background-color: rgb(66, 106, 237);
  color: white;
}
.tijiao:hover {
  background-color: rgb(66, 106, 237);
  color: white;
}
.dabian:hover {
  background-color: rgb(66, 106, 237);
  color: white;
}
.icon {
  width: 50px;
  height: 20px;
  background-color: rgb(141, 172, 251);
  float: right;
  font-size: 12px;
  text-align: center;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  color: white;
  font-weight: bolder;
}
.title2 {
  margin: 20px auto auto 10px;
  font-weight: bold;
}
.time {
  font-size: 10px;
  margin: 10px auto auto 10px;
}
</style>
